<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>字符相关可视化</title>
    <link rel="icon" type="image/x-icon" href="img/linuxicon.png"/>
    <link rel="stylesheet" href="rightMyExecute.css" type="text/css" />
    <link rel="stylesheet" href="tooltip.css" type="text/css" />
    <link rel="stylesheet" href="RightWindowDropDown.css" type="text/css" />
    <link rel="stylesheet" href="chrSvg.css" type="text/css" />
    <script src="jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.min.css"/>
    <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
    <style>
        div.statTabItem{
            width: 100px;
            font-size: 10px;
            display: inline;
        }
    </style>
    <script>
        let nowLogItem = 0, logScrollSpeed = 100, lastLogState = 0;
        let funcTypeOK = false;
        let chrFuncType, funcType = $.getJSON("json/chrdrvCall/funcType.json",
            function()
            {
                chrFuncType = $.getJSON("json/chrdrvCall/chrFuncType.json", function(){
                    funcTypeOK = true;
                });
            }
        );

        //这里有个同步问题。。
        function initJsonLog(jn)
        {
            $.ajax({url:"initConsole.txt", "dataType":"text",success:function(txt)
                {
                    $("textarea#myScreenWindowOutput").html(txt);
                }});
            if(!funcTypeOK) return;
            lastLogState = 0;
            nowFile = jn;
            nowLogItem = 0;
            let p = $("div#myLogWindowOutput").html("");
            $.each(jn, function(idx, obj){
                let t = $("<div></div>").addClass("myLogItem");
                if(obj[0]["funcName"] != undefined)
                {
                    t.append($("<div></div>").text(idx + " Func: " + obj[0]["funcName"]));
                    t.append($("<div></div>").attr({"style":"margin-left: 200px; margin-top: -10px;"}).text("File: " + obj[0]["fileName"]));
                }
                else
                {
                    t.append($("<div></div>").text(idx + " outputScreen"));
                }
                p.append(t);
            });
        }


        let echoFile, AoutFile, nowFile;

        function drawNow(isAdd)
        {
            $("rect").each(
                function()
                {
                    $(this).removeClass("nowRect");
                }
            );
            if(nowLogItem < 0) return;
            const scr = nowFile[nowLogItem][0]["screen"];
            const func = nowFile[nowLogItem][0]["funcName"];
            if(scr != undefined)
            {
                $("textarea#myScreenWindowOutput").html(scr);
            }
            if(func != undefined)
            {
                const tpe = funcType.responseJSON[func];
                $("rect#global" + tpe).addClass("nowRect");

                const cpe = chrFuncType.responseJSON[func];
                if(cpe != undefined)
                {
                    $("rect#local" + cpe).addClass("nowRect");
                }

                let cnt1 = $("#Tbl" + tpe);
                let cnt2 = $("#TTbl" + cpe);

                cnt1.html(parseInt(cnt1.text())+isAdd);

                cnt2.html(parseInt(cnt2.text())+isAdd);
            }
            else
            {

            }
        }

        $(document).ready(
            function()
            {
                $("a#aoutCallLog").hide();
                $("a#echoCallLog").hide();
                echoFile = $.getJSON("json/chrdrvCall/echo.json", function(jn){
                    $("a#echoCallLog").show();
                });

                AoutFile = $.getJSON("json/chrdrvCall/a.out.json",function(jn){
                    $("a#aoutCallLog").show();
                });

                $("a#echoCallLog").click(
                    function()
                    {
                        initJsonLog(echoFile.responseJSON);
                    }
                );

                $("a#aoutCallLog").click(
                function()
                {
                    initJsonLog(AoutFile.responseJSON);
                }
                );

                $("img#forwardBtn").click(
                    function()
                    {
                        if(nowLogItem < 0)nowLogItem = 0;
                        if(nowLogItem >= nowFile.length)return;
                        $("div#myLogWindowOutput").animate(
                            {scrollTop: (++nowLogItem) * 37},0);
                        drawNow(1);
                        //37: height + margin-top(懒得写了)
                    }
                );

                $("img#backBtn").click(
                    function()
                    {
                        if(nowLogItem > nowFile.length)nowLogItem = nowFile.length;
                        if(nowLogItem <= 0)return;
                        drawNow(-1);
                        $("div#myLogWindowOutput").animate(
                            {scrollTop: (--nowLogItem) * 37},0);
                        drawNow(0);
                        for(i=nowLogItem; i>=0; i--)
                        {
                            const scr = nowFile[i][0]["screen"];
                            if(scr != undefined)
                            {
                                $("textarea#myScreenWindowOutput").html(scr);
                                break;
                            }
                        }
                    }
                );

                $("img#startBtn").click(
                    function()
                    {
                        if(lastLogState == 0)
                        {
                            nowLogItem = 0;
                        }
                        const itemCnt = nowFile.length;
                        function aniBackFunc(isForward)
                        {
                            if(nowLogItem >= itemCnt) return;
                            drawNow(1);
                            nowLogItem++;
                            $("div#myLogWindowOutput").animate(
                                    {scrollTop: nowLogItem * 37},logScrollSpeed, aniBackFunc);
                        }

                        $("div#myLogWindowOutput").animate(
                            {scrollTop: nowLogItem * 37},logScrollSpeed, aniBackFunc);
                    }
                );

                $("img#pauseBtn").click(
                    function ()
                    {
                        $("div#myLogWindowOutput").stop();
                        lastLogState = 1;
                    }
                );

                $("img#stopBtn").click(
                    function()
                    {
                        $("div#myLogWindowOutput").stop();
                        lastLogState = 0;
                    }
                );

                $("a#mySetting").click(
                    function()
                    {
                        const barmax = 150;
                        function refreshSwatch()
                        {
                            logScrollSpeed = barmax + 1 - $("#slider").slider( "value");
                            //console.log(logScrollSpeed);
                        }

                        $("#slider").slider({
                            orientation: "horizontal",
                            range: "min",
                            max: barmax,
                            value: barmax + 1 - logScrollSpeed,
                            slide: refreshSwatch,
                            change: refreshSwatch
                        });
                        $("#dialog").dialog();
                    }
                );
            }
        );

    </script>
</head>
<body>

<div style="transform: scale(0.67,0.67); position: absolute; margin-top:-100px; margin-left:-100px; x:0; y:0; user-select:none;">
    <script src="chrdrvGlobalSvg.js"></script>
</div>

<div style="transform:scale(0.67, 0.67);position:absolute; margin-top:-100px; margin-left: 350px; user-select:none;">
    <script src="chrdrvSvg.js"></script>
</div>
<div id="myExecute" style="position:absolute; margin-left: 600px;">
    <div id="myLogWindow">
        <header id="myLogHeader">
            <img class="myIcon" src="img/logheader.png" alt="Log"/>
            Debug Log
            <div class="myRightMenu">
                <div class="dropdown">
                    <div class="dropbtn">选项</div>
                    <div class="dropdown-content">
                        <a id="aoutCallLog">a.out执行记录</a>
                        <a id="echoCallLog">echo执行记录</a>
                        <a id="mySetting">设置</a>
                    </div>
                </div>
            </div>
        </header>
        <script src="logBtnBar.js"></script>
        <div id="myLogWindowOutput">

        </div>
    </div>

    <script src="rightConsole.js"></script>
</div>

<div style="position:absolute; margin-top: 430px;">

</div>

<div id="dialog" title="设置" style="display:none;">
    <p>执行速度</p>
    <div id="slider"></div>
    <div><a sytle="float:left;">慢</a><a style="float:right;">快</a></div>
</div>

<!--
2: "globalDeviceCtrl"
4: "globalProcessCtrl"
8: "globalManageProg" -->

<table style="position: absolute; margin-top:400px; font-size: 12px;" id="globalTable">
    <tr>
        <td id="TblTFuncLib">函数库</td>
        <td id="TblFuncLib" style="width:50px;">0</td>
        <td id="TblTSystemCallIntf">系统调用接口</td>
        <td id="TblSystemCallIntf" style="width:50px;">0</td>
    </tr>
    <tr>
        <td id="TblTFileSystem" >文件子系统</td>
        <td id="TblFileSystem" style="width:50px;">0</td>
        <td id="TblTBuffer">高速缓冲</td>
        <td id="TblBuffer" style="width:50px;">0</td>
    </tr>
    <tr>
        <td id="TblTCharDrv">字符设备</td>
        <td id="TblCharDrv" style="width:50px;">0</td>
        <td id="TblTBlockDrv">块设备</td>
        <td id="TblBlockDrv" style="width:50px;">0</td>
    </tr>
    <tr>
        <td id="TblTProcessCommunicate">进程间通信</td>
        <!-- ProcessComm名称要改。。-->
        <td id="TblProcessCommunicate" style="width:50px;">0</td>
        <td id="TblTManageProg">调度程序</td>
        <td id="TblManageProg" style="width:50px;">0</td>
    </tr>
    <tr>
        <td id="TblTMemoryManage">内存管理</td>
        <td id="TblMemoryManage" style="width:50px;">0</td>
        <td id="TblTHardwareCtrl">硬件控制</td>
        <td id="TblHardwareCtrl" style="width:50px;">0</td>
    </tr>
</table>

<!--
2: "localCharDrvIntf"
6: "localCharDrv"
-->
<table style="position: absolute; margin-top:400px; margin-left: 300px; font-size: 12px;" id="localTable">
    <tr>
        <td>read</td>
        <td id="TTblreadcall" style="width:50px;">0</td>
        <td>write</td>
        <td id="TTblwritecall" style="width:50px;">0</td>
    </tr>
    <tr>
        <td>tty_read</td>
        <td id="TTbltty_read" style="width:50px;">0</td>
        <td>tty_write</td>
        <td id="TTbltty_write" style="width:50px;">0</td>
    </tr>
    <tr>
        <td>copy_to_cooked</td>
        <td id="TTblcopy_to_cooked" style="width:50px;">0</td>
        <td>put_queue</td>
        <td id="TTblput_queue" style="width:50px;">0</td>
    </tr>
    <tr>
        <td>con_write</td>
        <td id="TTblcon_write" style="width:50px;">0</td>
        <td>CharDrv</td>
        <td id="TTblCharDrv" style="width:50px;">0</td>
    </tr>

</table>
<footer style="margin-top: 600px; position:absolute;">
    linux0.11运行可视化 Created by 宋振华、陈宇翔. 指导老师：杨兴强
</footer>

</body>
</html>